<template>
    <div class="wraps">
        <div v-if="name == 1" class="flex"><Input style="width:400px" placeholder="请输入魂师名称" v-model="search" /> <Button @click="searchVal" style="margin-left:10px;" type="info">查询</Button> <Button @click="clear" style="margin-left:10px;">清空</Button> </div>
        <Alert style="margin-top:10px" type="success">开发者QQ:1195566313 群号:1001577356 1,2含义:例如强攻系魂环有(猛兽系,巨蝎系) 猛兽系1 巨蟹系2 </Alert>
        <Tabs v-model="name">
            <TabPane label="魂环推荐" name="1"></TabPane>
            <TabPane label="阵容推荐" name="2"></TabPane>
            <TabPane label="新手攻略" name="3"></TabPane>
        </Tabs>
        <div v-if="name == 1" class="wraps-card">
            <div class="left">
                <Card @click.native="switchBox(item)" :style="leval(item.type)" class="card" :key="index" v-for="(item,index) in remake">
                    <div> {{item.name}}<strong> {{item.type}} </strong> {{item.series}}</div>
                    <div>魂环推荐： <span style="color:red">{{item.num}}</span> </div>
                </Card>
            </div>
            <div class="right-item">
                <div class="right-title"> {{item.name}} {{item.type}}</div>
                <div class="right-tj">魂环推荐： <span style="color:red">{{item.num}}</span> </div>
                <div class="right-img"> <img :src="item.url" /></div>
            </div>
        </div>
        <div class="wraps-right" v-if="name == 2">
            <div class="lineup" :key="index" v-for="(item,index) in lineup">
                <div :style="{color:item.value>=4 ? 'red' :'skyblue'}" class="lineup-title">{{item.name}}</div>
                <div class="lineup-list">{{item.list}}</div>
                <Rate disabled allow-half v-model="item.value" />
                <Divider />
            </div>
        </div>
        <div class="wraps-right" v-if="name == 3">
            <div class="lineup" :key="index" v-for="(item,index) in Introduction">
                <div class="lineup-list">{{item.desc}}</div>
                <Divider />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: "1",
            search: "",
            item: {},
            remake: [],
            Introduction: [{
                desc: "一、前期玩法前期大家尽可能多的推进主线剧情，游戏内的主线剧情当中可以获得魂师魂力提升所需要的材料，而这些副本每天可以扫荡三次，无法消耗钻石获得更多的挑战次数。所以前期为了保证有足够的材料提升魂力解锁更多的技能，自然是剧情推的越多越好。"
            }, {
                desc: "二、魂师推荐 魂师方面新手玩家零氪的话，可以优先培养辅助系魂师作为主力，然后输出方面选中一个强攻系作为过渡，我们可以从开服福利当中拿到昊天锤唐三，新手角色小舞以及蓝银草唐三都是可以作为毕业角色使用的。此时就差辅助以及一个强攻，辅助方面个人推荐大家选择奥斯卡以及鬼魅，这两个角色都有着恢复魂力的效果，可以让我们开局直接释放大招。然后强攻可以选择月关，在完成挑战关卡后可以拿到自选礼包。 "
            }, {
                desc: "三、氪金推荐  氪金方面还是以角色为主，前期比较不错的阵容有三个，一个是唐三体系搭配戴沐白以及尘心，一个是月关鬼魅的武魂融合技，一个是火系的输出。"
            }],
            lineup: [
                {
                    name: "新手过度阵容",
                    list: "唐三，小舞，大师，绛珠，杨无敌，赵无极",
                    value: 4
                },
                {
                    name: "阵容一",
                    list: "邪月，辰心，奥斯卡(加怒)，鬼魅(加怒)，唐三控(蓝银草)，白鸟妹(可以拉条)无线用技能 这套阵容，基本接近无限用技能，很少普攻!",
                    value: 3
                },
                {
                    name: "阵容二",
                    list: "宁荣荣 奥斯卡 骨龙 尘心 戴沐白 朱竹清 这个阵容主打普攻破甲流，其中宁荣荣负责拉速，奥斯卡负责点火，骨龙负责抗伤加盾，戴沐白提供百分百破甲，朱竹清以及尘心则负责普攻输出。",
                    value: 3
                },
                {
                    name: "阵容三",
                    list: "火队风笑天：风笑天+火舞+马红俊+宁荣荣+奥斯卡+柳二龙（可换焱或邪月，实在没有可选择三辅助）",
                    value: 4
                },
                {
                    name: "阵容四",
                    list: "马红俊+火舞+宁荣荣+奥斯卡+焱+柳二龙",
                    value: 4.5
                },
                {
                    name: "阵容五",
                    list: "唐三，宁荣荣（白沉香），剑尘心，戴沐白（赵无极），奥斯卡，柳二龙（敏攻魂师） 戴沐白100%群体破甲配合剑尘心群攻技能对破甲敌人的50%增伤，伤害提升效果拔群。奥斯卡最强辅助，开局群体回魄力，保证起手就能放技能。宁荣荣拉条回血群体加攻击，保证己方血量的同时先手放技能，加上唐三的群控，经常是对面一回合都没行动就减员3个。最后一个位置给了柳二龙，因为戴沐白和剑尘心都是群体攻击，最后补一个高伤敏攻系魂师就可以，没有柳二龙的用开局送的小舞也是可以的，毕竟小舞自己也可以回魄力，对小舞而言，相当于无限技能。",
                    value: 3
                },
                {
                    name: "阵容六",
                    list: "无限技能斩杀流阵容：唐三，奥斯卡，鬼魅，邪月，宁荣荣，戴沐白（剑尘心、唐昊，昊天唐三）套阵容我愿称之为版本最强，整个阵容的核心为邪月、鬼魅和奥斯卡。",
                    value: 5
                }
                ,
                {
                    name: "阵容七",
                    list: "风笑天+火舞+马红俊/焱+柳二龙+宁蓉蓉/白沉香+奥斯卡/宁风致/鬼魅。",
                    value: 4
                }
            ],
            list: [
                {
                    name: "昊天锤-唐三",
                    type: 'SSR',
                    series: "强攻系",
                    num: 1112,
                    url: require('@/assets/img/haotianchui.png')
                },
                {
                    name: "蓝银草-唐三",
                    type: "R SR SSR 可进化",
                    series: "控制系",
                    num: "(1121 或者 1111)",
                    url: require('@/assets/img/lanyincao.jpg')
                },
                {
                    name: "小舞",
                    type: "R SR SSR 可进化",
                    series: "敏攻系",
                    num: 1122,
                    url: require('@/assets/img/xiaowu.jpg')
                },
                {
                    name: "唐昊",
                    type: "SSR",
                    series: "强攻系",
                    num: 2111,
                    url: require('@/assets/img/tanghao.jpg')
                },
                {
                    name: "阿银",
                    type: "SSR",
                    series: "辅助系",
                    num: 1111,
                    url: require('@/assets/img/ayin.jpg')
                },
                {
                    name: "奥斯卡",
                    type: "SSR",
                    series: "辅助系",
                    num: "(1121 或者 2121)",
                    url: require('@/assets/img/aosika.jpg')
                },
                {
                    name: "宁荣荣",
                    type: "SSR",
                    series: "辅助系",
                    num: 1212,
                    url: require('@/assets/img/nrr.jpg')
                },
                {
                    name: "朱竹青",
                    type: "SSR",
                    series: "敏攻系",
                    num: 1222,
                    url: require('@/assets/img/zzq.jpg')
                },
                {
                    name: "戴沐白",
                    type: "SSR",
                    series: "强攻系",
                    num: 1112,
                    url: require('@/assets/img/dmb.jpg')
                },
                {
                    name: "马红俊（胖子）",
                    type: "SSR",
                    series: "强攻系",
                    num: 1221,
                    url: require('@/assets/img/mhj.jpg')
                },
                {
                    name: "柳二龙",
                    type: "SSR",
                    series: "敏攻系",
                    num: "(1121 或者 1112)",
                    url: require('@/assets/img/lel.jpg')
                },
                {
                    name: "比比东",
                    type: "SSR",
                    series: "控制系",
                    num: '(1111 或者 1222)',
                    url: require('@/assets/img/bbd.jpg')
                },
                {
                    name: "风笑天",
                    type: "SSR",
                    series: "强攻系",
                    num: "(2221 或者 1221)",
                    url: require('@/assets/img/fxt.jpg')
                },
                {
                    name: "火舞",
                    type: "SSR",
                    series: "控制系",
                    num: '(1221 或者 1112)',
                    url: require('@/assets/img/hw.jpg')
                },
                {
                    name: "独孤博",
                    type: "SSR",
                    series: "控制系",
                    num: 1211,
                    url: require('@/assets/img/dgb.jpg')
                },
                {
                    name: "玉天心",
                    type: "SSR",
                    series: "强攻系",
                    num: 2211,
                    url: require('@/assets/img/ytx.jpg')
                },
                {
                    name: "鬼魅",
                    type: "SSR",
                    series: "辅助系",
                    num: 1212,
                    url: require('@/assets/img/gm.jpg')
                },
                {
                    name: "邪月",
                    type: "SSR",
                    series: "敏攻系",
                    num: 1212,
                    url: require('@/assets/img/xy.jpg')
                },
                {
                    name: "胡列娜",
                    type: "SSR",
                    series: "控制系",
                    num: 1111,
                    url: require('@/assets/img/hln.jpg')
                },
                {
                    name: "炎",
                    type: "SSR",
                    series: "防御系",
                    num: 1212,
                    url: require('@/assets/img/yan.jpg')
                },
                {
                    name: "剑道尘心",
                    type: "SSR",
                    series: "强攻系",
                    num: 1221,
                    url: require('@/assets/img/jdcx.jpg')
                },
                {
                    name: "古榕",
                    type: "SSR",
                    series: "防御系",
                    num: 1111,
                    url: require('@/assets/img/gr.jpg')
                },
                {
                    name: "月关",
                    type: "SSR",
                    series: "强攻系",
                    num: 2111,
                    url: require('@/assets/img/yg.jpg')
                },
                {
                    name: "梦神机",
                    type: "SSR",
                    series: "控制系",
                    num: 1111,
                    url: require('@/assets/img/msj.png')
                },
                {
                    name: "白沉香",
                    type: "SR",
                    series: "辅助系",
                    num: 1122,
                    url: require('@/assets/img/bcx.png')
                },
                {
                    name: "宁风致",
                    type: "SR",
                    series: "辅助系",
                    num: 1122,
                    url: require('@/assets/img/nfz.jpg')
                },
                {
                    name: "水冰儿",
                    type: "SR",
                    series: "控制系",
                    num: 2221,
                    url: require('@/assets/img/sbe.jpg')
                },
                {
                    name: "火无双",
                    type: "SR",
                    series: "敏攻系",
                    num: 1222,
                    url: require('@/assets/img/hws.jpg')
                },
                {
                    name: "杨无敌",
                    type: "SR",
                    series: "敏攻系",
                    num: 2221,
                    url: require('@/assets/img/ywd.jpg')
                },
                {
                    name: "弗兰德",
                    type: "SR",
                    series: "敏攻系",
                    num: 2222,
                    url: require('@/assets/img/fld.jpg')
                }

            ]
        }
    },
    methods: {
        leval(type) {
            if (type.includes('SSR')) {
                return {
                    background: '#F5D679',
                }
            } else {
                return {
                    background: '#67527C',
                    color: 'white'
                }
            }
        },
        switchBox(item) {
            this.item = item;
            console.log(item, 2)
        },
        searchVal() {
            if (this.search == '') {
                this.remake = this.list;
                this.item = this.list[0]
            } else {
                let result = this.list.filter(v => v.name.includes(this.search));
                if (result.length == 0) {
                    return this.$Message.error('暂无结果')
                } else {
                    this.item = result[0]
                }
                this.remake = result
            }
        },
        clear() {
            this.search = ''
            this.remake = this.list;
            this.item = this.list[0]
        }
    },
    mounted() {
        this.item = this.list[0]
        this.remake = this.list;
        document.title = '斗罗大陆-魂师对决'
    }
}
</script>

<style scoped lang="less">
.wraps {
    height: 100%;
    overflow: hidden;
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    .lineup {
        padding: 10px;
        .lineup-title {
            font-weight: 800;
            font-size: 15px;
        }
        .lineup-list {
            margin-top: 10px;
            font-size: 14px;
        }
    }
    .flex {
        display: flex;
    }
    .wraps-right {
        overflow: auto;
        margin-top:5px;
    }
    .wraps-card {
        height: 100%;
        flex: 1;
        display: flex;
        overflow: hidden;
        .right-item {
            padding: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
            .right-title {
                text-align: center;
                font-weight: 800;
                font-size: 18px;
            }
            .right-tj {
                margin-top: 20px;
                text-align: center;
                font-size: 15px;
            }
            .right-img {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    border-radius: 8px;
                    height: 300px;
                    max-width: 600px;
                    object-fit: cover;
                }
            }
        }
        .left {
            overflow: auto;
        }
        .card {
            width: 300px;
            margin-top: 10px;
            cursor: pointer;
            &:hover {
                background: skyblue !important;
            }
        }
    }
}
</style> 